<template>
  <v-content style="bottom:0.50rem;" v-vuet-scroll="{ path: 'shop', name: 'content' }">
    <v-miaoScroll :on-refresh="data.onRefresh" :on-getmore="data.onGetmore" :has-next="data.has_next" :showview="data.showview" v-vuet-scroll="{ path: 'discovery', name: 'content' }">
      <div class="mw-column-style" style="margin-top:0.1rem">
        <swiper v-if='data.bannerlist.length>0' :options="swiperOption" ref="mySwiper" style="width:3.75rem;height:1.73rem;margin-bottom:0.33rem;">
          <swiper-slide  v-for="(item,index) in data.bannerlist" :key="index" id="index">
            <img  style="margin-left:0.15rem;width:3.45rem;height:1.61rem;border-radius: 0.08rem;object-fit:cover;" :src="item.picture_url"></img>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <div class="mw-column-center-style" style="width:3.55rem;margin-left: 0.1rem;">
          <div class="mw-row-style" style="align-items: center;justify-content: center;margin-bottom: 0.1rem;">
            <img src="/static/discovery_sale_title_left.png" style="height:0.14rem;width:0.19rem;object-fit:cover;"/>
            <div class="mw-first-text-color" style="font-size: 0.22rem;font-weight: bold;margin:0 0.08rem 0 0.08rem;">商品推荐</div>
            <img src="/static/discovery_sale_title_right.png" style="height:0.14rem;width:0.19rem;object-fit:cover;"/>
          </div>
          <div v-for="(item,index) in data.list">
            <v-goodsitem enter="shop"  :detail="item" ></v-goodsitem>
          </div>

        </div>
      </div>
    </v-miaoScroll>


  </v-content>

</template>

<script>
  import { mapModules, mapRules } from 'vuet'
  import 'swiper/dist/css/swiper.css'
  import utils from '../../utils'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  var vm = null;
  export default {
    mixins: [
      mapModules({ data: 'shop'}),
      mapRules({store: [{ path: 'shop' }],once: [{ path: 'shop' }]})
    ],
    components: {
      swiper,
      swiperSlide
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted(){
      this.data.needFetch = true
    },
    created() {
      vm = this
    },
    methods:{
      skipClickBuy(item){
        this.data.needFetch = false
        if (window.location.href.indexOf(this.GLOBAL.skitToThirdWebSign) == -1) {
          window.location.replace(window.location.href + this.GLOBAL.skitToThirdWebSign)
        }

        window.location.href = item.link;
      },
    },
    data () {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          loop: true,
          autoplay:{   delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false },
          on:{
            click: function(e){
//              vm.$pushRouteByJson(vm.data.bannerlist[this.realIndex].link)
              vm.data.needFetch = false
              utils.skipFilter(vm.data.bannerlist[this.realIndex].link,vm)
//              window.location.href = vm.data.bannerlist[this.realIndex].link
            },
          },
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .swiper-pagination-bullet-active {
    background-color: #FFCF0F;
  }
  .zone-layout {
    display: flex;
    flex-direction: column;
    width:3.45rem;
    margin-top:0.15rem;
    background-color: #ffffff;
    box-shadow:0 -0.06rem 0.2rem 0 rgba(0,0,0,0.1);
    border-radius: 0.08rem;
  }
  .zone-top-layout  {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width:100%;
    height:0.48rem;
    align-items: center;
  }
  .zone-top-title {
    margin-left:0.15rem;
    color:#333333;
    font-size: 0.17rem;
    font-weight: bold;
  }
  .zone-top-more {
    margin-right:0.11rem;
    color:#333333;
    font-size: 0.15rem;
  }
  .zone-head-layout {
    width:3.45rem;
    height:1.73rem;
    position: relative;
  }
  .zone-head-img {
    width:3.45rem;
    height:1.73rem;
    position: absolute;
    left:0;
    top:0;
    object-fit:cover;
  }
  .zone-head-shadow {
    width:3.45rem;
    height:1.73rem;
    background:linear-gradient(180deg,rgba(112,112,112,0) 0%,rgba(0,0,0,1) 100%);
    opacity:0.7;
    position: absolute;
    left:0;
    top:0;
  }
  .zone-head-bottom-show
  {
    position: absolute;
    left:0.1rem;
    bottom:0.08rem;
    width:3.25rem;
  }
  .zone-head-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color:#FFFFFF;
    line-height:0.21rem;
    font-size:0.15rem;
  }


</style>
